<template>
	<view>
		<uni-list>
			<uni-list-item 
			v-for="(item,i) in pager.data" :key="item.id"
			clickable @click="showDetails(item.lid)">
				<view slot="header" class="product-header">
					<image :src="$url.base+item.pic"></image>
				</view>
				<view slot="body" class="product-body">
					<text class="title">{{item.title}}</text>
					<text class="price">￥{{item.price}}</text>
					<view class="bottom">
						<uni-tag class='tag' 
						v-if="item.is_onsale==='1'" 
						text="促销" type="error" size="mini"></uni-tag>
						<text class="comments">
							{{item.sold_count}}条评论</text>
						<text class="rate">好评率100%</text>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<!-- 加载更多  组件 -->
		<uni-load-more :status="loadStatus"></uni-load-more>
		<xz-go-top></xz-go-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kw: '',
				pager: {
					pno: 0,
					data:[]
				} ,//分页器对象 
				loadStatus:'more'
			};
		},
		methods: {
			showDetails(pid){
				uni.navigateTo({
				url:'/pages/product-details/product-details?pid='+pid
				})
			},
			//加载下一页数据
			// 页面加载时 直接加载第一页
			// 触底加载更多  加载下一页 保留当前页
			// 顶部下拉刷新 清除已加载数据 重新加载第一页
			loadNextPageData() {
				let pno = this.pager.pno + 1
				let url = this.$url.productList
				uni.showLoading({
					title: '加载中'
				})
				this.loadStatus='loading'
				uni.request({
					url,
					data: {
						pno,
						kw: this.kw
					},
					success: (res) => {
						// console.log(res.data)
						res.data.data=[...this.pager.data,...res.data.data]
						this.pager = res.data
						if(res.data.pno>=res.data.pageCount){
							this.loadStatus='noMore'
						}else{
							this.loadStatus='loading'
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			

		},
		onLoad(data) {
			console.log(data)
			if (data.bname) {
				uni.setNavigationBarTitle({
					title: `${data.bname}馆`
				})
			}
			if (data.kw) {
				this.kw = data.kw
			}
			this.loadNextPageData()
		},
		onReachBottom() {
			console.log('到底了')
			if(this.loadStatus=='noMore') return
			this.loadNextPageData()
		},
		onPullDownRefresh() {
			console.log('刷新了')
			this.pager={
				pno:0,
				data:[]
			}
			this.loadNextPageData()
		}

	}
</script>

<style lang="scss">
	.product-header {
		image {
			width: 180rpx;
			height: 180rpx;
			margin: -10rpx 10rpx -10rpx -30rpx;
		}
	}
	.product-body{
		display: flex;
		flex-direction: column;
		.title{
			font-size: $uni-font-size-sm;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp:2 ;
			-webkit-box-orient: vertical;
		}
		.price{
			font-size: $uni-font-size-sm + 1;
			font-weight: bold;
			color: $xz-theme;
		}
		.bottom{
			display: flex;
			align-items: center;
			font-size: $uni-font-size-sm;
			color: $uni-text-color-grey;
			transform: scale(.9);
			transform-origin:left center;
			margin-left: 3rpx;
		}
	}
</style>
